<html> 
<head><title>New Tab Page</title></head> 
<body onload="createGUI()"> 
 

<script language="JavaScript" src="http://js-treemap.sourceforge.net/dist/uk.org.zowie.Treemap-0.9.js"></script> 
<script language="JavaScript" src="./script2.js"></script> 
 
<!-- 
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/BoxAnimator.js"></script>
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/Decorators.js"></script>
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/TreeMap.js"></script>
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/DivTreeMap.js"></script>
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/NodeFacade.js"></script>
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/Rectangle.js"></script>
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/TreeNode.js"></script>
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/TreeNodeAdaptor.js"></script>
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/TreeNodeShader.js"></script>
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/Util.js"></script>
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/XmlAdaptor.js"></script>
	<script language="JavaScript" src="/home/jerome/Documents/Extension Chrome Perso/uk.org.zowie.Treemap-0.9/XmlShader.js"></script>
--> 

<center><div class="divBox" id="myDiv" style="height: 600px; width: 600px; background: #7777AA"></div></center>
 
<script type="text/javascript"> 
 
function createGUI()
{
	// Load the XML from the server
	var filename = "treeNodes.js";
 
	var request = createAjaxRequest();
	request.onreadystatechange = function () {
		if( request.readyState != 4 ) return;
		if( 0 != request.status && request.status != 200 ) throw "Cannot GET \"" + filename + "\"";
		window.status = "loaded " + filename;
 
		// Evaluate the JSON
		window.status = "";
		eval( "var rootNode = " + request.responseText );
 
		// Render the DIV treemap
		var mapDIV = document.getElementById( "myDiv" );
		var map = new DivTreeMap( mapDIV, rootNode, {
			shader: new TreeNodeShader( rootNode )
		} );
		
		// Set up surrounding GUI controls
		var infoBox = document.getElementById( "infoBox" );
		var backButton = document.getElementById( "backButton" );
		backButton.disabled = true;
		
		map.onMouseOver = function( node ) {
			infoBox.innerHTML = node.toString();
		}; 
		map.onMouseOut = function( node ) {
			infoBox.innerHTML = "";
		}; 
		map.onZoomClick = function( node ) {
			map.zoom();
			backButton.disabled = false;
		}
		
		backButton.onclick = function() {
			backButton.disabled = ( 0 === map.unzoom() );
		};
	
		// Define & plug in a resize hook
		window.onresize = function() { map.checkResize(); };
		map.checkResize();
	};
	window.status = "loading " + filename;
	request.open( 'GET', filename, true );
	request.send( null );
}
 
function attrToString( attr )
{
	return attr.nodeName + "=" + attr.nodeValue;
}
</script> 
 
</body> 
</html>
